<template>
    <div class="statistic1" :id="id">
        {{ time }}
    </div>
</template>

<script>
import register from '@/js/main/register.js';

export default {
    props: {
        element: {
            type: Object
        },
        id: {
            type: String
        }
    },
    data() {
        return {
            time: '',
            maxtime: 24 * 60 * 60
        };
    },
    created() {
        register.addComponent(this);
    },
    mounted() {
        this.CountDown();
    },
    methods: {
        CountDown() {
            if (this.maxtime >= 0) {
                let hour = Math.floor(this.maxtime / 3600);
                let minutes = Math.floor((this.maxtime / 60) % 60);
                let seconds = Math.floor(this.maxtime % 60);
                let msg = this.checkTime(hour) + ' : ' + this.checkTime(minutes) + ' : ' + this.checkTime(seconds);
                this.time = msg;
                --this.maxtime;
            } else {
                clearInterval(timer);
            }
            let timer = setInterval(() => {
                clearInterval(timer);
                this.CountDown();
            }, 1000);
        },
        checkTime(i) {
            if (i < 10) {
                i = '0' + i;
            }
            return i;
        }
    },
    destroyed() {
        register.removeComponent(this);
    }
};
</script>

<style lang='scss'>
.statistic1 {
    color: $white;
}
.statistic1 .ant-statistic-title {
    color: rgb(73, 190, 219);
}
.statistic1 .ant-statistic-content {
    color: $white;
}
</style>